<template>
    <div class="science">
        <div class="science-box">
            <SectionTitle
                en="SCIENCE"
                title="科普知识"
                meta="science knowledge"
            />
            <!-- <SectionSearch path="/user/science" placeholder="按疾病查科普" /> -->

            <div class="science-list">
                <div class="more-box">
                    <el-link
                        :underline="false"
                        type="primary"
                        href="/user/science/?type=0"
                    >更多<i class="el-icon-arrow-right"></i></el-link>
                </div>
                <div class="swiper-box">
                    <!-- <el-row :gutter="20" class="science-list-row"> -->
                    <swiper
                        :options="swiperOptions"
                        class="swiper-box__swiper"
                        ref="scienceSwiper"
                    >
                        <swiper-slide
                            v-for="item in scienceList1"
                            :key="item.index"
                            class="swiper-box__slide"
                        >
                            <!-- <el-col
                :span="8"
                v-for="(item, index) in scienceList"
                :key="index"
                class="science-list-col"
              > -->
                            <a
                                target="_blank"
                                :href="`/article/preview/${item.id}`"
                                class="science-card"
                            >
                                <img
                                    class="science-card__img"
                                    :src="item.articleImages"
                                />
                                <div class="science-card__title">{{ item.title }}</div>
                            </a>
                            <!-- </el-col> -->
                        </swiper-slide>
                        <!-- <div class="prev el-icon-arrow-left" slot="button-prev"></div>
            <div class="next el-icon-arrow-right" slot="button-next"></div> -->
                    </swiper>
                </div>
                <!-- </el-row> -->
            </div>
            <div class="science-list">
                <div class="more-box">
                    <el-link
                        :underline="false"
                        type="primary"
                        href="/user/science?type=1"
                    >更多<i class="el-icon-arrow-right"></i></el-link>
                </div>
                <div class="swiper-box">
                    <swiper
                        :options="swiperOptions"
                        class="swiper-box__swiper"
                        ref="videoSwiper"
                    >
                        <swiper-slide
                            v-for="item in scienceList2"
                            :key="item.index"
                            class="swiper-box__slide"
                        >
                            <a
                                target="_blank"
                                :href="`/article/preview/${item.id}`"
                                class="science-card video"
                            >
                                <img
                                    class="science-card__img"
                                    :src="item.articleImages"
                                />
                                <div class="science-card__title">{{ item.title }}</div>
                                <i class="icon el-icon-caret-right"></i>
                            </a>
                        </swiper-slide>
                        <!-- <div class="prev el-icon-arrow-left" slot="button-prev"></div>
            <div class="next el-icon-arrow-right" slot="button-next"></div> -->
                    </swiper>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SectionTitle from './SectionTitle'
import SectionSearch from './SectionSearch'
import { $_scienceFindAll } from '@/network/service'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    SectionTitle,
    SectionSearch,
    swiper,
    swiperSlide
  },
  data() {
    return {
      scienceList1: [],
      scienceList2: [],
      swiperOptions: {
        //小手掌抓取滑动
        grabCursor: true,
        slidesPerView: 4,
        // 循环
        loop: false,
        // 设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // 滑动速度
        speed: 800
        // navigation: {
        //   nextEl: '.next',
        //   prevEl: '.prev'
        // }
      }
    }
  },
  computed: {
    scienceSwiper() {
      return this.$refs.scienceSwiper.swiper
    },
    videoSwiper() {
      return this.$refs.videoSwiper.swiper
    }
  },
  mounted() {
    this.$_scienceFindAll1()
    this.$_scienceFindAll2()
  },
  methods: {
    async $_scienceFindAll1() {
      const res = await $_scienceFindAll({
        size: 10,
        type: 0,
        page: 0,
        state: 1
      })
      if (res.code === 200) {
        this.scienceList1 = res.rows.content
      }
    },
    async $_scienceFindAll2() {
      const res = await $_scienceFindAll({
        size: 10,
        type: 1,
        page: 0,
        state: 1
      })
      if (res.code === 200) {
        this.scienceList2 = res.rows.content
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.more-box {
  display: flex;
  flex-direction: row-reverse;
}
.science {
  background-color: #fff;
}
.science-box {
  width: 1200px;
  margin: 0 auto;
}
.science-list {
  padding-top: 30px;
  padding-bottom: 0px;

  // .science-list-row {
  //   .science-list-col {
  //     padding-top: 10px;
  //     padding-bottom: 10px;
  //   }
  // }
}
.science-list + .science-list {
  padding-bottom: 30px;
}

.swiper-box {
  padding-top: 10px;

  .prev {
    left: -10px;
  }
  .next {
    right: -10px;
  }
  .prev.swiper-button-disabled,
  .next.swiper-button-disabled {
    // opacity: 0.2;
    // cursor: auto;
    // pointer-events: none;
    display: none;
  }
  .prev,
  .next {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 38px;
    color: rgba(190, 190, 190, 1);
  }
  // &__swiper {
  // padding: 0 10px;
  // box-sizing: border-box;
  // }
  &__slide {
    padding: 10px;
    box-sizing: border-box;
  }
}

.science-card {
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #bfbfbf;
  border-radius: 20px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  &__img {
    display: block;
    width: 100%;
    height: 130px;
    border-radius: 20px 20px 0px 0px;
  }
  &__title {
    font-size: 14px;

    font-weight: 400;
    color: #333333;
    line-height: 1;
    padding: 18px 18px 20px;
  }
  &.video {
    position: relative;
    .icon {
      padding: 6px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 50px;
      color: #666;
      background-color: rgba(190, 190, 190, 0.6);
      border-radius: 50%;
    }
  }
}
</style>
